<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
  <link rel="stylesheet" href="../css/index.css">
  <link rel="stylesheet" href="../css/service.css">
  <style lang="">
    .times {
      float: right
    }
  </style>
  <title>次卡</title>
</head>

<body class="service page-group">
  <div class="page">
    <!-- //<header class="bar bar-nav" id="golbalHeader"></header> -->

    <!-- 这里是页面内容区 -->
    <div class="content">
      <div class="content-block native-scroll">
        <div class="card-content">
          <div class="list-block media-list">
            <ul>

            </ul>
            <p class="moreInfo" onclick="product.loadMore()"></p>
          </div>
        </div>
      </div>
      <!-- 底部 -->

    </div>
    <!-- <nav class="bar bar-tab" id="golbalFooter"></nav> -->
    <div id="modal" style="display:none">
      <li class="item-content">
        <div class="item-media">
          <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg"
            width="44">
        </div>
        <div class="item-inner">
          <div class="item-title-row">
            <div class="item-title" style="width:100%;">
              <span class="title-name"></span>
              <span class="times"></span>
            </div>
          </div>
          <div class="item-subtitle relative">
            <span>￥</span>
            <a href="#" class="button button-big button-fill button-success payButton" onclick="product.buProduct(this)">购买</a>
          </div>
        </div>
      </li>
    </div>
  </div>

</body>
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type="text/javascript" src="../js/index.js"></script>
<script type="text/javascript">
  var product = (function ($) {
    $.init()
    var product = new ST({
      golbalHeaderText: '次卡购买',
      golbalHeaderFunc: function () {
        window.history.go(-1)
      },
      getProductParams: {
        page: 1,
        pageSize: 4
      },
      buy:{
        product:{
          productId:''
        }
      },
      load: false
    })
    product.pushAjax({
      getProduct: {
        url: '/app/api/public/product/productList',
        data: product.getProductParams
      },
      buy:{
        url:'/app/api/private/product/buy',
        data:product.buy
      }
    })

    product.pushAjaxSuccess({
      getProduct: function (res) {
        if (res.code === '1') {
          console.log(res)
          if (res.data.productList.length < 4) {
            $('.moreInfo').text('没有更多数据')
            product.load = false
          } else {
            $('.moreInfo').text('点击加载更多')
            product.load = true
          }
          res.data.productList.forEach(function (e) {
            
            var li = $('#modal').find('li').clone()
            $(li).find('img').attr('src', e.image)
            $(li).find('.dsc').text(e.dsc)
            $(li).find('.item-title .title-name').text(e.name)
            $(li).find('.item-title .times').text(e.times + "次")
            $(li).find('.item-subtitle span').text("￥" + e.price.split(',')[0])
            var product = {
              productId:e.productId,
              price:e.price,
              name:e.name,
              times:e.times,
              dsc:e.dsc
            }
            $(li).find('.item-subtitle a').attr('product',JSON.stringify(product))
            $(li).appendTo($('.list-block ul'))
          })
        }
      },
      buy:function (res) {
        console.log(res)
      }
    })
    product.http('getProduct')
    product.loadMore = function () {
      if (product.load) {
        product.getServiceParams.page++
          product.http('getProduct')
      }
    }
    product.goOrder = function (row) {
      window.location.href = './appointment.html?serviceId=' + $(row).attr('service-id') + "&name=" + $(
        row).attr('service-name') + "&price=" + $(row).attr('price') + "&marketPrice=" + $(row).attr(
        'market-price') + "&totalTime=" + $(row).attr('total-time')
    }
    product.buProduct = function (element) {
      window.location.href = './productDetail.html?product=' + encodeURI($(element).attr('product'))
    }
    product.render()
    return product
  })($)
</script>

</html>